<!-- 通讯录详情 -->
<template>
  <view class="home flex column">
    <u-navbar :background="{ backgroundColor: '#3D5FFF' }" :title="title" back-icon-color="#fff" title-color="#fff"> 
      <u-icon slot="right" class="u-m-r-20" name="question-circle" color="#fff" size="36" @click="popupFlag = true"></u-icon>
    </u-navbar>
    <!-- 搜索框 -->
    <view class="search">
      <u-search
        placeholder="请输入姓名"
        v-model="searchData.name"
        shape="round"
        bg-color="#fff"
        height="80"
        :show-action="true"
        :animation="true"
        :input-style="{ marginLeft: '20rpx' }"
        :search-icon="searchSrc"
        placeholder-color="#999999"
        :action-style="{
          color: '#288CFE',
          fontSize: '14px',
          fontWeight: '400'
        }"
        @search="handleSearch"
        @custom="handleSearch"
        @change="handleSearch"
      ></u-search>
    </view>
    <!-- 列表 -->
    <scroll-view
      :scroll-y="true"
      class="container item one"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="50"
      refresher-background="#F5F5F5"
      @refresherrefresh="onRefresh"
      @refresherpulling="onPulling"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
      @scrolltolower="onScrollToLower"
    >
      <view class="container-body">
        <template v-if="list && list.length">
          <u-card :border="false" :body-style="{ padding: '0 30rpx' }" :show-head="false" v-for="(item, index) in list" :key="index">
            <view slot="body">
              <view class="card-row u-flex">
                <template v-if="item.name && item.name.indexOf('调度室') > -1">
                  <u-image width="120rpx" @click="callPhone(item.contactPhone)" height="100rpx" :src="require('@/static/image/dds.png')"></u-image>
                </template>
                <template v-else-if="item.name && item.name.indexOf('监控室') > -1">
                  <u-image width="120rpx" @click="callPhone(item.contactPhone)" height="100rpx" :src="require('@/static/image/jks.png')"></u-image>
                </template>
                <view class="r-box u-flex item one">
                  <view class="u-flex-1 box u-flex-col u-row-between u-p-l-20">
                    <text class="f-bold u-font-lg" style="color: #288cfe">
                      {{ item.name }}
                    </text>
                    <text class="ellipsis" style="color: #288cfe">{{ item.workType }}</text>
                  </view>
                  <view class="box u-flex u-p-l-20">
                    <text class="u-m-r-20 t-section">
                      {{ item.contactPhone || item.officePhone }}
                    </text>
                    <u-image width="30rpx" @click="callPhone(item.contactPhone || item.officePhone)" height="30rpx" :src="phoneSrc"></u-image>
                  </view>
                </view>
              </view>
            </view>
          </u-card>
          <view class="p-t-10 p-b-10">
            <u-loadmore :status="status" />
          </view>
        </template>
        <template v-if="showEmpty">
          <view class="c-empty p-absolute-center">
            <u-empty text="抱歉，暂无相关数据~" :src="require('@/static/image/empty.png')"></u-empty>
          </view>
        </template>
      </view>
    </scroll-view>

    <!-- 弹出层 -->
    <u-popup v-model="popupFlag" mode="center" width="640rpx" height="400rpx" :closeable="true" border-radius="8">
      <view class="popup">
        <view class="f-18">帮助</view>
        <view class="u-m-t-30 popup-cont">
          <view class="indent">点击“电话图标”可直接拨打电话；若不能拨打，请设置app拨打电话权限。</view>
          <view>例如：</view>
          <view>红米12pro设置方式：</view>
          <view class="indent">点击手机设置-应用设置-权限管理-应用权限管理-选择app名称-拨打电话-始终允许</view>
        </view>
      </view>
		</u-popup>
  </view>
</template>

<script>
import { BASE_IP, BASE_URL } from '@/utils/ip.js'
export default {
  name: 'index',
  data() {
    return {
      searchData: {
        pageSize: 20,
        pageNumber: 1,
        name: '',
        customerId: ''
      },
      title: '',
      headerSrc: require('@/static/image/header.png'),
      phoneSrc: require('@/static/image/tel.png'),
      coalMineName: '',
      triggered: false, // 下拉刷新
      showEmpty: false,
      status: 'loading',
      list: [],
      BASE_IP: '',
      BASE_URL: '',
      searchSrc: require('@/static/image/search.png'),
      popupFlag:false,// 弹出层
    }
  },
  mounted() {
    ;(this.BASE_URL = BASE_URL), (this.BASE_IP = BASE_IP)
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      this.searchData.pageNumber = 1
      this.status = 'loading'
      this.showEmpty = false
    },
    getNum(data) {
      let title = ''
      if (data.state === 0) {
        title = '正常生产'
      } else if (data.state === 1) {
        title = '异常'
      }
      return title
    },
    //打电话方法
    callPhone(data) {
      uni.makePhoneCall({
        phoneNumber: data // 仅为示例
      })
    },
    /**
     * 请求数据
     */
    async getData() {
      const res = await this.$post('/contacts/people/dataList', this.searchData)
      if (res && res.body.content) {
        this.list = this.searchData.pageNumber === 1 ? res.body.content : this.list.concat(res.body.content)
        // 到底了
        if (res.body.content.length < this.searchData.pageSize) {
          this.status = 'nomore'
        }
        // 数据空
        if (this.searchData.pageNumber === 1 && this.list && this.list.length === 0) {
          this.showEmpty = true
        } else {
          this.showEmpty = false
        }
      }
    },
    /**
     * 搜索
     */
    handleSearch() {
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }
      this.searchTimer = setTimeout(() => {
        this.init();
        this.getData()
      }, 300)
    },
    /**
     * 上拉加载
     */
    onScrollToLower() {
      if (this.status === 'loading') {
        this.searchData.pageNumber++
        this.getData()
      }
    },
    onPulling(e) {},
    onRefresh() {
      if (this.Isfreshing) return
      this.Isfreshing = true
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true
        this.init()
        this.getData()
        setTimeout(() => {
          this.triggered = false // 触发onRestore，关闭刷新图标
          this.Isfreshing = false
        }, 1200)
      }
    },
    onRestore() {},
    onAbort() {}
  },
  onLoad(options) {
    const { code, name } = options
    this.$set(this.searchData, 'customerId', code)
    this.title = name
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  /* 搜索框 */
  .search {
    padding: 20rpx 28rpx;
    display: flex;
    align-items:center ;
  }
  /deep/.u-card {
    box-shadow: 0px 1px 40rpx rgba(184, 184, 184, 0.2) !important;
    border-radius: 8rpx !important;
  }
  .card-row {
    height: 140rpx;
    .r-box {
      height: 100%;
      width: 100%;
      .box {
        width: 248rpx;
      }
    }
  }
}
.popup{
    padding: 20rpx 40rpx;
    .popup-cont{
      .indent{
        text-indent: 40rpx;
      }
      >view{
        margin-bottom: 10rpx;
      }
    }
  }
</style>
